<template>
  <n-tooltip>
    <template #trigger>
      <n-popover trigger="click" :width="400" placement="bottom-end">
        <template #trigger>
          <div ref="settingRef">
            <icon-ant-design-setting-outlined text-22 />
          </div>
        </template>
        <template #header>
          <n-space justify="space-between" align="center" px-20>
            <n-checkbox
              :checked="checkAll.checked"
              :indeterminate="checkAll.indeterminate"
              @click="handleCheckAll"
            >
              列展示
            </n-checkbox>
            <n-button text type="info" size="small" @click="emits('reset')">
              重置
            </n-button>
          </n-space>
        </template>
        <n-scrollbar :style="{ maxHeight: `calc(80vh - ${bottom}px)` }">
          <n-checkbox-group v-model:value="checkModel">
            <n-list hoverable>
              <vue-draggable
                v-model="columnsModel"
                :animation="150"
                handle=".table-column-draggable"
                filter=".table-column-lock"
              >
                <template v-for="column in columnsModel" :key="column.key">
                  <n-list-item>
                    <template #prefix>
                      <icon-iconamoon-move-fill
                        text="18 #444"
                        dark="text-#aaa"
                        :class="
                          column.lock
                            ? 'table-column-lock cursor-no-drop'
                            : 'table-column-draggable cursor-move'
                        "
                      />
                    </template>
                    <template #suffix>
                      <n-space :wrap="false" align="center">
                        <tooltip-icon
                          tip="居左靠齐"
                          :disabled="column.lock"
                          :checked="!column.align || column.align === 'left'"
                          @click-event="column.align = 'left'"
                        >
                          <icon-mdi-format-horizontal-align-left />
                        </tooltip-icon>
                        <tooltip-icon
                          tip="居中靠齐"
                          :disabled="column.lock"
                          :checked="column.align === 'center'"
                          @click-event="column.align = 'center'"
                        >
                          <icon-mdi-format-horizontal-align-center />
                        </tooltip-icon>
                        <tooltip-icon
                          icon=""
                          tip="居右靠齐"
                          :disabled="column.lock"
                          :checked="column.align === 'right'"
                          @click-event="column.align = 'right'"
                        >
                          <icon-mdi-format-horizontal-align-right />
                        </tooltip-icon>

                        <n-divider vertical class="mx-0!" />

                        <tooltip-icon
                          tip="固定到左侧"
                          :disabled="column.lock"
                          :checked="column.fixed === 'left'"
                          @click-event="column.fixed = 'left'"
                        >
                          <icon-ri-skip-left-line />
                        </tooltip-icon>
                        <tooltip-icon
                          tip="固定到右侧"
                          :disabled="column.lock"
                          :checked="column.fixed === 'right'"
                          @click-event="column.fixed = 'right'"
                        >
                          <icon-ri-skip-right-line />
                        </tooltip-icon>
                      </n-space>
                    </template>
                    <n-checkbox
                      :value="column.key"
                      :label="(column.title as string)"
                      :disabled="column.lock"
                    />
                  </n-list-item>
                </template>
              </vue-draggable>
            </n-list>
          </n-checkbox-group>
        </n-scrollbar>
      </n-popover>
    </template>
    列设置
  </n-tooltip>
</template>

<script lang="tsx" setup>
import { useVModel } from "@vueuse/core";
import type { DataTableColumn } from "../types";
import { VueDraggable } from "vue-draggable-plus";
import { useElementBounding } from "@vueuse/core";

interface Props {
  tableColumns: DataTableColumn[];
  aliveColumns: string[];
  aliveColumnsOrigin: string[];
}
interface Emits {
  (e: "update:tableColumns", v: DataTableColumn[]): void;
  (e: "update:aliveColumns", v: string[]): void;
  (e: "reset"): void;
}
const props = defineProps<Props>();
const emits = defineEmits<Emits>();
const checkModel = useVModel(props, "aliveColumns", emits);
const columnsModel = useVModel(props, "tableColumns", emits);

const settingRef = ref();
const { bottom } = useElementBounding(settingRef, { windowScroll: false });

const isCheckAll = props.aliveColumnsOrigin.length === checkModel.value.length;
const checkAll = ref({
  checked: isCheckAll,
  indeterminate: !isCheckAll,
});

watch(
  () => checkModel.value.length,
  (newV) => {
    if (newV === 0) {
      checkAll.value.indeterminate = false;
      checkAll.value.checked = false;
    } else if (newV === props.aliveColumnsOrigin.length) {
      checkAll.value.indeterminate = false;
      checkAll.value.checked = true;
    } else {
      checkAll.value.indeterminate = true;
    }
  },
  { immediate: true }
);

const handleCheckAll = () => {
  if (checkAll.value.indeterminate || !checkAll.value.checked) {
    checkAll.value.indeterminate = false;
    checkAll.value.checked = true;
    checkModel.value = props.aliveColumnsOrigin;
  } else {
    checkAll.value.checked = false;
    checkModel.value = [];
  }
};
</script>
